<template>
  <div style="margin: 20px; 10px 0 10px">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <div gutter="10" v-masonry>
        <tuiJian style="margin-bottom: 15px;" v-masonry-tile v-for="item in usermsg" :key="item.id" :tui="item">
        </tuiJian>
      </div>
    </van-list>
  </div>
</template>

<script>
import { ref } from "vue";
import tuiJian from "@/components/tuiJian.vue";
export default {
  components: { tuiJian },
  data() {
    return {
      usermsg: [
        { id: 1, fm_pic: '../../public/ll.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1', user_name: '张三', view: 3 },
        { id: 2, fm_pic: '../../public/OIP-C.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0', user_name: '李四', view: 150 },
        { id: 3, fm_pic: '../../public/OIPC.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1', user_name: '王五', view: 1200 },
        { id: 4, fm_pic: '../../public/ll.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1', user_name: '张三', view: 3 },
        { id: 5, fm_pic: '../../public/OIP-C.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0', user_name: '李四', view: 150 },
        { id: 6, fm_pic: '../../public/OIPC.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1', user_name: '王五', view: 1200 },
        { id: 7, fm_pic: '../../public/ll.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1', user_name: '张三', view: 3 },
        { id: 8, fm_pic: '../../public/OIP-C.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0', user_name: '李四', view: 150 },
        { id: 9, fm_pic: '../../public/OIPC.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1', user_name: '王五', view: 1200 },
      ],
      loading: ref(false),
      finished: ref(true)
    }
  },
}
</script>

<style lang="scss" scoped></style>